<template>
  <dv-border-box-8 class="device-status-panel">
    <div class="panel-header">
      <i class="el-icon-cpu"></i>
      设备状态监控
    </div>
    
    <div class="device-status-content">
      <el-table :data="deviceStatusData" style="width: 100%">
        <el-table-column prop="deviceId" label="设备编号" />
        <el-table-column prop="status" label="状态" :formatter="formatStatus" />
        <el-table-column prop="runtime" label="运行时间" />
        <el-table-column prop="fault" label="故障信息" />
      </el-table>
    </div>
  </dv-border-box-8>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  deviceStatusData: {
    type: Array,
    required: true
  }
})

// 状态格式化函数
const formatStatus = (row) => {
  return row.status === 'running' ? '运行中' : '停机'
}
</script>

<style scoped>
.device-status-panel {
  width: 100%;
  height: 350px;
  position: relative;
  padding: 15px;
}

.panel-header {
  font-size: 16px;
  color: #29b6ff;
  margin-bottom: 15px;
}

.device-status-content {
  height: calc(100% - 30px);
  display: flex;
  flex-direction: column;
}

.el-table {
  background-color: rgba(24, 44, 78, 0.5);
  border-radius: 4px;
}

.el-table th {
  background-color: rgba(21, 45, 99, 0.5);
  color: #29b6ff;
}

.el-table td {
  color: #fff;
}
</style> 